<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>树</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
  <div id="subpage-layout">
    <div data-options="region: 'west', title: '菜单'" style="width: 200px">
      <ul id="subpage-tree"></ul>
    </div>
    <div data-options="region: 'center', split: true"
      style="padding: 5px; background: #eee">
      <div id="subpage-tabs" class="easyui-tabs" data-options="fit: true, border: close">
        <div data-options="title: '首页'"></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    $(function () {
      $("#subpage-layout").layout({
        //布局组件将自适应父容器。当使用“body”标签创建布局的时候，整个页面会自动最大。默认值为false
        fit : true
      })
      //subpageTabs.tabs();
      $("#subpage-tree").tree({
        url : '${pageContext.request.contextPath}/tree-node-server',
        lines : true,
        dnd : true,
        checkbox : true,
        animate : true,
        cascadeCheck : true,
        onlyLeafCheck : true,
        onClick : function (node) {
          console.log(node.target);
          console.log($(this).tree("isLeaf", node.target));
          if ($(this).tree("isLeaf", node.target)) {
            var attrs = node.attributes;
            console.log(attrs);
            var subpageTabs = $("#subpage-tabs");
            if (subpageTabs.tabs("exists", node.text)) {
              subpageTabs.tabs("select", node.text);
            } else {
              subpageTabs.tabs("add", {
                title: node.text,
                closable: true,
                content: '<b>hello</b>'
              })
            }
          }
        }
      })
    })
  </script>
</body>
</html>